<template>
  <view class="dcwj-wrapper">
    <view class="main-pd">
      <view class="u-card" v-if="dataList.length && !loading">
        <view class="wj-item" v-for="item in dataList" :key="item.id">
          <view class="color-000 font-32 u-m-t-28">{{ item.title }}</view>
          <view class="u-flex u-flex-between u-m-t-24 u-m-b-25">
            <view :class="[wjClass(item.state), 'status']">{{
              wjStatus(item.state)
            }}</view>
            <view
              class="color-f34b47 font-28"
              @click="
                $u.route('/pagesA/dcwj/cywj', { id: item.questionnaireId })
              "
              >参加问卷调查 ></view
            >
          </view>
        </view>
      </view>
      <view v-show="loading">
        <u-skeleton rows="5" title loading></u-skeleton>
      </view>
      <view class="empty-con">
        <u-empty mode="list" :show="!dataList.length && !loading"></u-empty>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { getwjListApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import { useList } from "@/hooks/useList";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
const { loadData, dataList, page, loading } = useList({
  listApi: getwjListApi,
});
let wjList = ref([
  {
    id: 1,
    title: "物业服务质量调查问卷",
    state: 0,
  },
  {
    id: 2,
    title: "物业服务质量调查问卷",
    state: 1,
  },
  {
    id: 3,
    title: "物业服务质量调查问卷",
    state: 2,
  },
]);
// 问卷状态判断
const wjStatus = computed((status) => {
  return function (status) {
    let statusArr = ["未开始", "进行中", "已结束"];
    return statusArr[status];
  };
});
const wjClass = computed((status) => {
  return function (status) {
    return "status" + status;
  };
});
onLoad(() => {
  page.value = 1;
  dataList.value = [];
  loadData({ deptId: userStore.deptId });
});
</script>

<style lang="scss" scoped>
.dcwj-wrapper {
  padding-top: 28rpx;

  .wj-item {
    border-bottom: 1rpx solid #e6e6e6;
    &:last-child {
      border: none;
    }
    .status {
      width: 132rpx;
      height: 40rpx;
      border-radius: 6rpx;
      font-size: 22rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .status0 {
      background-color: #f0f0f0;
      color: #595959;
    }

    .status1 {
      background-color: #edf9e8;
      color: #52c41a;
    }

    .status2 {
      background-color: #ffedee;
      color: #ff4d4f;
    }
  }
}
</style>
